<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            overflow: auto;
            background-color: #bfa;
            background-image: url("./image/fox.png");
            padding: 10px;
            /*
设置背景的范围
    background-clip
    可选值:
        border-box  默认值，背景会出现在边框的下边
        padding-box 背景不会出现在边框，只出现在内容区和内边距
        content-box 背景只会出现在内容区
        
        background-origin   背景图片的偏移量计算的原点
            padding-box         默认值，
            background-position 从内边距处开始计算
            content-box         背景图片的偏移量从内容区处计算
            border-box          背景图片的变量从边框处开始计算
*/
            /* background-origin: border-box;background-clip: content-box;*/
            /*
background-size设置背景图片的大小
    第一个值表示宽度
    第二个值表示高度
    -如果只写一个，则第二个值默认是 auto

    cover图片的比例不变，将元素铺满
    contain图片比例不变，将图片在元素中完整显示
*/
            background-origin: border-box;
            background-clip: content-box;
            border: 10px red double;
            background-size: 100% auto;
        }
        
        .box2 {
            width: 300px;
            height: 1000px;
            background-color: orange;
            background: url("./image/tennies.png");
            background-repeat: no-repeat;
            /*
            background-attachment
            -背景图片是否跟随元素移动
            -可选值:
                scroll  默认值背景图片会跟随元素移动
                fixed   背景会固定在页面中，不会随元素移动
            */
            background-attachment: fixed;
        }
    </style>
    <script>
        /**
         * @param {string} s
         * @param {string} t
         * @return {boolean}
         */
        var isAnagram = function(s, t) {
            if (s.length != t.length) {
                return false;
            }
            let sArr = Array.from(s);
            let tArr = Array.from(t);
            for (let i = 0; i < sArr.length; i++) {
                let flag = false;
                let j = 0;
                for (j = 0; j < tArr.length; j++) {
                    if (sArr[i] === tArr[j]) {
                        console.log(tArr);
                        tArr[j] = '';
                        flag = true;
                        break;
                    }
                }
                if (j == tArr.length) {
                    return false;
                }
            }
            return true;
        };
        console.log('abc' [1].charCodeAt())
        console.log(isAnagram("aacc", "cacc"));
    </script>
</head>

<body>
    <!-- 
        background-image设置背景图片
        -可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
        -如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
        -如果背景的图片大于元素，将会一个部分背景无法完全显示
        -如果背景图片和元素一样大，则会直接正常显示
 -->
    <div class="box1">
        <div class="box2" style="height: 1000px;">asdasd</div>
    </div>
</body>

</html>